<template>
  <osc-navpage
    class="personal-root"
    title="库存管理"
    height="100"
    titleColor="#000"
    backgroundColor="#eff3f2"
    leftItemSrc="https://github.com/osmartian/weex-frame/blob/master/src/views/personal/imgs/common_goback.png?raw=true"
    @naviBarLeftItemClick="naviBarLeftItemClick">

    <div class="content">
      
      <list>
        <refresh class="refresh" @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
          <text class="indicator">下拉刷新……</text>
        </refresh>

        <cell class="cell panel" v-for="item in lists">
            <div class="panel-before-right">
              <div class="panel-head">
                <text class="text">原料：</text>  
                <text class="text">{{item.goodsName}}</text>  
              </div>
              <div class="panel-bottom">
                <text class="text-bottom">剩余:</text>
                <text class="text-bottom">{{item.num}}</text>
                <text class="text-bottom">{{item.unit}}</text>
              </div>
            </div>
            
            <image class="right" src="https://olwr1lamu.qnssl.com/right.png"></image>
            
        </cell>
      </list>
    </div>

    <div class="img-add" @click="addGoods">
      <image class="img-top" src="https://olwr1lamu.qnssl.com/export.png"></image>
    </div>

  </osc-navpage> 
</template>

<script>
import route from 'router/page'
import mixins from 'mixins'

const storage = weex.requireModule('storage')
const modal = weex.requireModule('modal')
const stream = weex.requireModule('stream')

export default {
  data () {
    return {
      entityId: '',
      selfEntityId: '',
      refreshing: false,
      lists: [
      ]
    }
  },
  mixins: [mixins],
  methods: {
    naviBarLeftItemClick () {
      this.router.pop()
    },
    onrefresh (event) {
      modal.toast({ message: '刷新中', duration: 1 })

      stream.fetch({
        method: 'GET',
        type: 'json',
        url: this.imgUrl.collect.computerUrl + 'getStock'
        }, callback => {
            this.lists = callback.data
      })
      this.refreshing = true
      setTimeout(() => {
        this.refreshing = false
      }, 200)
    },
    addGoods () {
      modal.alert({
        message: '导出功能暂未完善！',
        duration: 0.3
      }, callback => {})
    }
  }, 
  created () {
    storage.getItem('power', event => {
      if (event.data == '1') {
        this.entityId = '100000'
        this.selfEntityId = '100000'
      } 
      if (event.data == '0') {
        this.entityId = '100000'
        this.selfEntityId = '100100'
      }
    })
    stream.fetch({
      method: 'GET',
      type: 'json',
      url: this.imgUrl.collect.computerUrl + 'getStock?entity_id=' + this.entityId + '&self_entity_id=' +this.selfEntityId
    }, callback => {
        this.lists = callback.data
    })
  }
}
</script>
<style>
  .content {
    position: absolute;
    height: 10000px;
  }
  .img-add {
    position: absolute;
    width: 100px;
    height: 100px;
    margin-top: 900px;
    margin-left: 600px;
  }
  .img-top {
    opacity:0.7;
    width: 100px;
    height: 100px;
  }
  .panel-before-right {
    width: 600px;
  }
  .right {
    margin-top: 20px;
    width: 70px;
    height: 70px;
    opacity:0.2;
  }
  .indicator {
    color: #888888;
    font-size: 42px;
    text-align: center;
  }
  .panel {
    padding-top: 25px;
    width: 750px;
    height: 150px;
    border-width: 2px;
    border-style: solid;
    border-color: #DDDDDD;
    background-color: #F5F5F5;
    flex-direction: row;  
  }
  .panel-head {
    margin-left: 10px;
    flex-direction: row;  
  }
  .panel-bottom {
    margin-left: 20px;
    flex-direction: row;  
  }
  .text {
    margin-left: 10px;
    border-style: solid;
    flex-direction: row;
    font-size: 42px;
    text-align: center;
    color: #41B883;
  }
  .text-bottom {
    margin-top: 10px;
    font-size: 32px;
    border-style: solid;
    color: #000000;
  }
</style>